import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:industry_net/base/common/util.dart';
import 'package:industry_net/base/component/component.dart';
import 'package:industry_net/base/component/empty.dart';
import 'package:industry_net/base/component/list/refresh.dart';
import 'package:industry_net/pages/msg/chat/chat_list/index.dart';
import 'package:industry_net/pages/msg/main/controller.dart';
import 'package:industry_net/pages/msg/main/views/cell.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

class MsgContainerPage extends StatelessWidget {
  MsgContainerPage({Key? key}) : super(key: key);

  final controller = Get.put(MsgController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: controller.state.tabKey,
      appBar: AppBar(
        backgroundColor: ColorsUtil.green,
        centerTitle: true,
        title: TabBar(
          controller: controller.tabCtrl,
          padding: EdgeInsets.zero,
          isScrollable: true,
          indicatorColor: ColorsUtil.white,
          labelPadding: EdgeInsets.symmetric(horizontal: 3.r),
          indicatorWeight: 2.5.r,
          indicatorPadding: EdgeInsets.fromLTRB(12.r, 0, 15.r, -4.5),
          unselectedLabelStyle:
              pfMediumStyle(color: ColorsUtil.white, fontSize: font16),
          labelStyle: pfSCStyle(color: ColorsUtil.white, fontSize: font17),
          tabs: ['通知', '聊天']
              .asMap()
              .map((key, value) => MapEntry(
                  key,
                  Tab(
                    child: RedContainer(
                      child: Text(value),
                      childSize: 40.r,
                      height: 20.r,
                      redCount: 35,
                      offx: 10.r,
                      // fontSize: 9.sp,
                    ),
                  )))
              .values
              .toList(),
        ),
        flexibleSpace: Container(
          margin: EdgeInsets.only(top: SizeFit.statusBarHeight + 6.r),
          child: Row(
            children: [
              //240.r
              Obx(
                () => SizedBox(
                  width: controller.state.tabIndex.value == 0 ? 100.r : 240.r,
                ),
              ),
              InkWell(
                onTap: () {
                  controller.actionClear();
                },
                child: Padding(
                  padding: EdgeInsets.all(10.r),
                  child: Container(
                    alignment: Alignment.center,
                    width: 20.r,
                    height: 20.r,
                    decoration: BoxDecoration(
                        color: const Color(0xff15964F),
                        borderRadius: BorderRadius.circular(10.r)),
                    child: Icon(
                      IconUtil.clear,
                      color: Colors.white70,
                      size: 11.r,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      body: TabBarView(
        controller: controller.tabCtrl,
        physics: const NeverScrollableScrollPhysics(),
        children: [
          MsgPage(),
          ChatListPage(),
          // const ChatroomsListPages(),
        ],
      ),
    );
  }
}

class MsgPage extends StatelessWidget {
  MsgPage({Key? key}) : super(key: key);
  final controller = Get.find<MsgController>();
  @override
  Widget build(BuildContext context) {
    return GetBuilder<MsgController>(builder: (_) {
      return Scaffold(
        backgroundColor: ColorsUtil.white,
        body: SmartRefresher(
          controller: controller.state.refreshCtrl,
          header: RefreshHeaderFooter.customHeader(),
          onRefresh: controller.onRefresh,
          onLoading: controller.onLoading,
          enablePullUp: true,
          child: controller.state.dataSource.isEmpty
              ? EmptyView()
              : ListView.separated(
                  itemBuilder: (context, index) {
                    return MsgCell(md: controller.state.dataSource[index]);
                  },
                  separatorBuilder: (context, index) => Container(
                        margin: EdgeInsets.symmetric(horizontal: gap12),
                        height: 1.r,
                        color: ColorsUtil.separator,
                      ),
                  itemCount: controller.state.dataSource.length),
        ),
      );
    });
  }
}
